<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DetailState</title>
</head>
<br>
<a href='/State'>Back</a>  </br>
BuyChance in period Hour State: {{ .ExecTime }} </br>
date= {{ .Date }} </br>
time= {{ .Time }} </br>
isvalid= {{ .Isvalid }} </br>
</br>

<li>ModeType1: 震荡(28-36)</li>
<li>ModeType2: 牛头(9-10)</li>
<li>ModeType4: 超跌(1-2 11-16)</li>
<li>ModeType8: 趋势（包含其他） 3-8 17-27</li>

<table border="1">
    <tr>
        <th id="sort0">StockID</th>
        <th id="sort1">AvgTransaction</th>
        <th id="sort2">Assigned</th>
        <th id="sort3">Type</th>
        <th id="sort4">Level</th>
    </tr>
    {{ range $i,$v := .DetailStates }}
        <tr>
            <td>
                {{ $v.StockID }}
            </td>
            <td>
                {{ $v.AvgTransaction }}
            </td>
            <td>
                {{ $v.Assigned }}
            </td>
            <td>
                {{ $v.Type }}
            </td>
            <td>
                {{ $v.Level }}
            </td>
        </tr>
    {{ else }}
        <li> No Stock to show</li>
    {{ end }}
</table>
</body>

<script type="text/javascript">
    var sort0 = document.getElementById('sort0');
    var sort1 = document.getElementById('sort1');
    var sort2 = document.getElementById('sort2');
    var sort3 = document.getElementById('sort3');
    var sort4 = document.getElementById('sort4');
    var up = true;
    sort0.onclick = function () {
        var table = document.getElementsByTagName('table')[0];
        var tr = table.getElementsByTagName('tr');
        var array = [];
        for (var i = 1; i < tr.length; i++) {
            array.push(tr[i]);
        }
        tr[0].getElementsByTagName('th')[1].innerHTML = "AvgTransaction";
        tr[0].getElementsByTagName('th')[2].innerHTML = "Assigned";
        tr[0].getElementsByTagName('th')[3].innerHTML = "Type";
        tr[0].getElementsByTagName('th')[4].innerHTML = "Level";
        if (up) {
            tr[0].getElementsByTagName('th')[0].innerHTML = "StockID⬇";
            SortUp(array, 0);
            up = false;
        } else {
            tr[0].getElementsByTagName('th')[0].innerHTML = "StockID⬆";
            SortDown(array, 0);
            up = true;
        }

        for (var i = 0; i < array.length; i++) {
            table.appendChild(array[i]);
        }
    };
    sort1.onclick = function () {
        var table = document.getElementsByTagName('table')[0];
        var tr = table.getElementsByTagName('tr');
        var array = [];
        for (var i = 1; i < tr.length; i++) {
            array.push(tr[i]);
        }
        tr[0].getElementsByTagName('th')[0].innerHTML = "StockID";
        tr[0].getElementsByTagName('th')[2].innerHTML = "Assigned";
        tr[0].getElementsByTagName('th')[3].innerHTML = "Type";
        tr[0].getElementsByTagName('th')[4].innerHTML = "Level";

        if (up) {
            tr[0].getElementsByTagName('th')[1].innerHTML = "AvgTransaction⬇";
            SortUp(array, 1);
            up = false;
        } else {
            tr[0].getElementsByTagName('th')[1].innerHTML = "AvgTransaction⬆";
            SortDown(array, 1);
            up = true;
        }

        for (var i = 0; i < array.length; i++) {
            table.appendChild(array[i]);
        }
    };
    sort2.onclick = function () {
        var table = document.getElementsByTagName('table')[0];
        var tr = table.getElementsByTagName('tr');
        var array = [];
        for (var i = 1; i < tr.length; i++) {
            array.push(tr[i]);
        }
        tr[0].getElementsByTagName('th')[0].innerHTML = "StockID";
        tr[0].getElementsByTagName('th')[1].innerHTML = "AvgTransaction";
        tr[0].getElementsByTagName('th')[3].innerHTML = "Type";
        tr[0].getElementsByTagName('th')[4].innerHTML = "Level";
        if (up) {
            tr[0].getElementsByTagName('th')[2].innerHTML = "Assigned⬇";
            SortUp(array, 2);
            up = false;
        } else {
            tr[0].getElementsByTagName('th')[2].innerHTML = "Assigned⬆";
            SortDown(array, 2);
            up = true;
        }

        for (var i = 0; i < array.length; i++) {
            table.appendChild(array[i]);
        }
    };
    sort3.onclick = function () {
        var table = document.getElementsByTagName('table')[0];
        var tr = table.getElementsByTagName('tr');
        var array = [];
        for (var i = 1; i < tr.length; i++) {
            array.push(tr[i]);
        }
        tr[0].getElementsByTagName('th')[0].innerHTML = "StockID";
        tr[0].getElementsByTagName('th')[1].innerHTML = "AvgTransaction";
        tr[0].getElementsByTagName('th')[2].innerHTML = "Assigned";
        tr[0].getElementsByTagName('th')[4].innerHTML = "Level";
        if (up) {
            tr[0].getElementsByTagName('th')[3].innerHTML = "Type⬇";
            SortUp(array, 3);
            up = false;
        } else {
            tr[0].getElementsByTagName('th')[3].innerHTML = "Type⬆";
            SortDown(array, 3);
            up = true;
        }

        for (var i = 0; i < array.length; i++) {
            table.appendChild(array[i]);
        }
    };
    sort4.onclick = function () {
        var table = document.getElementsByTagName('table')[0];
        var tr = table.getElementsByTagName('tr');
        var array = [];
        for (var i = 1; i < tr.length; i++) {
            array.push(tr[i]);
        }
        tr[0].getElementsByTagName('th')[0].innerHTML = "StockID";
        tr[0].getElementsByTagName('th')[1].innerHTML = "AvgTransaction";
        tr[0].getElementsByTagName('th')[2].innerHTML = "Assigned";
        tr[0].getElementsByTagName('th')[3].innerHTML = "Type";
        if (up) {
            tr[0].getElementsByTagName('th')[4].innerHTML = "Level⬇";
            SortUp(array, 4);
            up = false;
        } else {
            tr[0].getElementsByTagName('th')[4].innerHTML = "Level⬆";
            SortDown(array, 4);
            up = true;
        }

        for (var i = 0; i < array.length; i++) {
            table.appendChild(array[i]);
        }
    };

    function SortUp(array, index) {
        for (var i = 0; i < array.length; i++) {
            for (var j = i + 1; j < array.length; j++) {
                if (array[j] === undefined) {
                    continue;
                }

                if ((Number(array[i].getElementsByTagName('td')[index].innerText) <= Number(array[j].getElementsByTagName('td')[index].innerText)) && (index !== 0)) {
                    var temp = array[i];
                    array[i] = array[j];
                    array[j] = temp;
                }

                if (((array[i].getElementsByTagName('td')[index].innerText) <= (array[j].getElementsByTagName('td')[index].innerText)) && (index === 0)) {
                    var temp = array[i];
                    array[i] = array[j];
                    array[j] = temp;
                }


            }
        }
    }

    function SortDown(array, index) {
        for (var i = 0; i < array.length; i++) {
            for (var j = i + 1; j < array.length; j++) {
                if (array[j] === undefined) {
                    continue;
                }


                if ((Number(array[i].getElementsByTagName('td')[index].innerText) >= Number(array[j].getElementsByTagName('td')[index].innerText) && (index !== 0))) {
                    var temp = array[i];
                    array[i] = array[j];
                    array[j] = temp;
                }

                if (((array[i].getElementsByTagName('td')[index].innerText) >= (array[j].getElementsByTagName('td')[index].innerText) && (index === 0))) {
                    var temp = array[i];
                    array[i] = array[j];
                    array[j] = temp;
                }

            }
        }
    }
</script>
</html>
